<template>
  <div class="Login">
    <!-- 标题 -->
    <div class="title"><h2 class="shadow-text" data-name="点餐系统APP">点餐系统APP</h2></div>
    <!-- 登录logo -->
    <div class="logo">
      <van-image class="userLogo" fit="cover" :show-loading="true" round width="2.5rem" height="2.5rem" :src="require('../assets/logo.png')" />
    </div>

    <van-form @submit="onSubmit">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Dialog, Notify, Toast } from "vant";

export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit() {
      //   console.log(this.username, this.password);
      this.$http.post("/user/login", { username: this.username, password: this.password }).then((res) => {
        // console.log(res.data);
        if (!res.data) {
          Dialog.alert({ message: "用户名或密码不正确!" });
          return;
        } else {
          Notify({ type: "success", message: "登录成功!" });
          // Toast.success("成功文案");
          sessionStorage.setItem("userEat", JSON.stringify(res.data));
          this.$router.push({ path: "/home" });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.Login {
  .title {
    padding-top: 2.5rem;
    h2 {
      text-align: center;
    }
  }

  .logo {
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0.2rem;
    .userLogo {
      box-shadow: 0 0 10px #1bb4fd;
    }
  }
}
</style>
